<style lang="scss" scoped>
	.n-404{
		@include n-col2;
		align-items: center;
		color: #fff;
		height: 100%;
		>h1{
			background-clip: -webkit-text;
			font-size: 50px;
			>i{
				margin-right: 15px;
			}
			
		}
		>h6{
			color: #eee;
			font-weight: 500;
			margin-top: 10px;
			font-size: 20px;
			>a{
				color: $theme-color;
				text-decoration: underline;
			}
		}
	}
	
</style>

<template>
	<div class="n-404" :style="{'background': `linear-gradient(${deg}deg, ${ Object.keys(grad).map(k=> `rgb(${ grad[k].slice(0,3).join(',')})`).join(',')  } )` }">
		
		<h1 :style="{'text-shadow': `0 0 ${ligh}px #fff`}" ><i class="el-icon-location-information" ></i>404</h1>
		<h6>找不到目标页面，<router-link to="/">去首页</router-link></h6>
	</div>
</template>

<script>
	export default {
		data(){
			return{
				grad:{
					a: [51,254,233,-1],
					b: [74,162,252,-1],
					c: [161,193,254,1],
					d: [245,167,251,-1],
					e: [210,144,252,-1],
					f: [240,240,250,-1],
				},
				deg: 45,
				ligh: 10,
				dir:1,
			}
		},
		mounted(){
		 
			this.timer = setInterval(()=> {
				this.ligh += this.dir;
				if(this.ligh > 20) this.dir = -0.5;
				if(this.ligh <= 2) this.dir = 0.5;
				const grad = this.grad;
				Object.keys(grad).forEach( k=> grad[k].slice(0,3).forEach( (v,idx)=> {
					let add = grad[k][3];
					let t = v + add * idx;
					if( t > 255 && add > 0 || t < 90 && add < 0)  add = -1 * add;
					this.$set(grad[k],idx, v + add * idx );
					this.$set(grad[k],3, add );
				}))
			},70 )
		},
		beforeDestroy(){
			clearInterval(this.timer)
		}
	}
	
	
</script>